<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 500px;
            height: 300px;
            margin: 0 auto;
            border: 1px solid #4ac682;
        }

        #box p {
            text-align: center;
            margin-top: 40px;
        }

        #box table {
            width: 300px;
            height: 40px;
            margin: 0 auto;
            margin-top: 40px;
            text-align: center;
            border-collapse: collapse;
            border: 1px solid #454545;
        }

        #box table .arrs {
            height: 40px;
            color: white;
            background-color: #4c83d6;
        }
    </style>
</head>

<body>
    <div id="box">
        <p>搜索名称：<input type="text" v-model="msg" @input="nowName"></p>
        <table>
            <tr class="arrs" v-for="(item,index) in arr1">
                <td>{{item.name | fmtNga}}</td>
                <td>{{item.gender | fmtNga}}</td>
                <td>{{item.age | fmtNga}}</td>
            </tr>
            <tr v-for="(item,index) in nowName" :key="index">
                <td>{{item.name}}</td>
                <td>{{item.gender}}</td>
                <td>{{item.age}}</td>
            </tr>
        </table>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#box",
            data: {
                arr: [
                    { name: "rick", gender: "male", age: "21", istrue: false },
                    { name: "demen", gender: "male", age: "26", istrue: false },
                    { name: "Jack", gender: "male", age: "26", istrue: false },
                    { name: "John", gender: "female", age: "20", istrue: false },
                    { name: "Lucy", gender: "female", age: "16", istrue: false },
                ],
                arr1: [
                    { name: "name", gender: "gender", age: "age" }
                ],
                msg: ""
            },
            filters: {
                fmtNga(val) {
                    console.log(val);
                    // charAt()返回字符串中指定下标（位置）的字符串   
                    // oUpperCase()字符串转换为大写   
                    // slice() 提取字符串的某个部分并在新字符串中返回被提取的部分
                    return val.charAt(0).toUpperCase() + val.slice(1)
                }
            },
            computed: {
                nowName() {
                    // 方式1
                    // return this.arr.filter(value => (value.name.toLowerCase()).indexOf(this.msg.toLowerCase()) !== -1)
                    // 方式2
                    this.newarr = []
                    for (var i = 0; i < this.arr.length; i++) {
                        console.log(this.arr[i].name);
                        let str = this.arr[i].name.toLowerCase()
                        let newmsg = this.msg.toLowerCase()
                        // match 检索是否有某个值
                        if (str.match(newmsg) != null) {
                            this.newarr.push(this.arr[i])
                        }
                    }
                    console.log(this.newarr);
                    return this.newarr
                }
            }
        })
    </script>
</body>

</html>